<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog"
            >添加分类</el-button
          >
        </el-col>
      </el-row>
      <!-- 商品分类的表格区域 -->
      <el-table
        :data="cateList"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="commodityTypeName" label="分类名称">
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.commodityLevel === 0">一级</el-tag>
            <el-tag type="success" v-else-if="scope.row.commodityLevel === 1"
              >二级</el-tag
            >
            <el-tag type="warning" v-else>三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditCateDialog(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteCate(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageIndex"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加分类的对话框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addCateDialogVisible"
      width="50%"
      @close="addCateDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="addCateForm"
        :rules="addCateFormRules"
        ref="addCateFormRef"
        label-width="100px"
      >
        <el-form-item label="分类名称" prop="CommodityTypeName">
          <el-input v-model="addCateForm.CommodityTypeName"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- 级联选择器 -->
          <!-- options 用于指定数据源 props用于指定配置对象 selectedKeys用于存储选中的值 -->
          <!-- checkStrictly: 'true' 设置父子节点取消选中关联，从而达到选择任意一级选项的目的 -->
          <el-cascader
            :options="parentCateList"
            :props="{
              expandTrigger: 'hover',
              value: cascaderProps.value,
              label: cascaderProps.label,
              children: cascaderProps.children,
              checkStrictly: 'true',
            }"
            v-model="selectedKeys"
            @change="parentCateChanged"
            clearable
            filterable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑分类的对话框 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="editCateDialogVisibel"
      width="50%"
      @close="editCateDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="editCateForm"
        :rules="editCateFormRules"
        ref="editCateFormRef"
        label-width="100px"
      >
        <el-form-item label="分类名称" prop="commodityTypeName">
          <el-input v-model="editCateForm.commodityTypeName"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisibel = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 商品分类列表查询的参数
      queryInfo: {
        // 当前页码数
        pageIndex: 1,
        // 每页显示多少条数据
        pageSize: 5
      },
      // 商品分类列表的所有数据
      cateList: [],
      // 商品分类总条数
      total: 0,
      // 添加分类对话框的显示与隐藏
      addCateDialogVisible: false,
      // 添加分类的表单数据绑定
      addCateForm: {
        // 分类名称
        CommodityTypeName: '',
        // 父级分类Id，默认一级分类
        CommodityPid: 0,
        // 分类层级，默认一级
        CommodityLevel: 0
      },
      // 添加分类的表单验证规则
      addCateFormRules: {
        // 分类名称的验证规则
        CommodityTypeName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },
      // 父级分类的列表
      parentCateList: [],
      // 指定级联选择器的配置对象
      cascaderProps: {
        // 选中的值
        value: 'id',
        // 看到的值
        label: 'commodityTypeName',
        // 父子嵌套的属性
        children: 'children'
      },
      // 选中的父级分类的Id数组
      selectedKeys: [],
      // 控制编辑分类的对话框显示与隐藏
      editCateDialogVisibel: false,
      // 编辑分类对话框的数据绑定对象
      editCateForm: {
        // 分类名称
        commodityTypeName: '',
        // 分类id
        id: 0
      },
      // 编辑分类对话框的验证规则对象
      editCateFormRules: {
        // 分类名称的验证规则
        commodityTypeName: [{ required: true, message: '请填写分类名称', trigger: 'blur' }]
      }
    }
  },
  // 钩子
  created () {
    // 获取商品分类列表数据
    this.getCateList()
  },
  methods: {
    // 商品分类列表
    async getCateList () {
      // 往数据库中发送请求
      const { data: res } = await this.$http.get('commodityTypes', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        // 商品分类获取失败
        // 提示获取失败的信息
        this.$message.error('商品分类获取失败！')
      } else {
        // 获取二级分类
        for (let index = 0; index < res.data.commodityTypes.length; index++) {
          const { data: res2 } = await this.$http.get(`commodityTypes/Pid/${res.data.commodityTypes[index].id}`)
          res.data.commodityTypes[index].children = res2.data.commodityTypes
          // 获取三级分类
          for (let i = 0; i < res2.data.commodityTypes.length; i++) {
            const { data: res3 } = await this.$http.get(`commodityTypes/Pid/${res2.data.commodityTypes[i].id}`)
            res2.data.commodityTypes[i].children = res3.data.commodityTypes
          }
        }
        // 商品分类获取成功
        // 把商品分类数据列表赋值给 cateList
        this.cateList = res.data.commodityTypes
        // 商品分类总条数
        this.total = res.data.pager.pageTotal
      }
    },
    // 监听 pageSize 的改变
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      // 刷新表格数据
      this.getCateList()
    },
    // 监听 pageIndex 的改变
    handleCurrentChange (newPage) {
      this.queryInfo.pageIndex = newPage
      // 刷新表格数据
      this.getCateList()
    },
    // 展示添加分类的对话框
    showAddCateDialog () {
      // 调用获取父级分类数据列表的函数
      this.getParentCateList()
      // 取消添加分类对话框的隐藏状态
      this.addCateDialogVisible = true
    },
    // 获取父级分类的数据列表，只获取前两级的所有分类
    async getParentCateList () {
      const { data: res } = await this.$http.get('commodityTypes', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        this.$message.error('数据获取失败！')
      } else {
        // 将获取到的数据赋值给 parentCateList
        // 获取二级分类
        for (let index = 0; index < res.data.commodityTypes.length; index++) {
          const { data: res2 } = await this.$http.get(`commodityTypes/Pid/${res.data.commodityTypes[index].id}`)
          res.data.commodityTypes[index].children = res2.data.commodityTypes
        }
        this.parentCateList = res.data.commodityTypes
      }
    },
    // 层级选择器中选择项发生变化时触发这个函数
    parentCateChanged () {
      // 如果 selectedKeys 数组中的长度大于0，说明选中的父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的id
        this.addCateForm.CommodityPid = this.selectedKeys[this.selectedKeys.length - 1]
        // 分类层级
        this.addCateForm.CommodityLevel = this.selectedKeys.length
      } else {
        // 反之，说明没有选中父级分类，自己就是父级
        // 重置父级分类的id为一级分类
        this.addCateForm.CommodityPid = 0
        // 重置分类层级为一级
        this.addCateForm.CommodityLevel = 0
      }
    },
    // 监听添加分类对话框关闭事件
    addCateDialogClosed () {
      this.$refs.addCateFormRef.resetFields()
      this.selectedKeys = []
      this.addCateForm.CommodityPid = 0
      this.addCateForm.CommodityLevel = 0
    },
    // 点击按钮，添加新的商品分类
    addCate () {
      // 对表单进行预验证
      // 拿到表单引用对象，对其进行预验证
      this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) {
          // 预验证不通过
          this.$message.error('请按照要求填写数据！')
        } else {
          // 预验证通过
          // 向数据库发送请求
          const { data: res } = await this.$http.post('commodityTypes', this.addCateForm)
          if (res.meta.status !== 200) {
            // 添加分类失败
            this.$message.error('添加分类失败！')
          } else {
            // 添加分类成功
            this.$message.success('添加分类成功！')
            // 刷新商品分类列表
            this.getCateList()
            // 隐藏添加分类对话框
            this.addCateDialogVisible = false
          }
        }
      })
    },
    // 点击按钮，删除分类
    deleteCate (id) {
      // 弹框提示用户是否确认删除
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 确定
        const { data: res } = await this.$http.delete('commodityTypes/' + id)
        if (res.meta.status !== 200) {
          // 删除失败
          this.$message.error('删除分类失败！')
        } else {
          // 删除成功
          this.$message.success('删除分类成功！')
          // 刷新商品分类列表
          this.getCateList()
        }
      }).catch(() => {
        // 取消删除
        this.$message.info('已取消删除！')
      })
    },
    // 点击按钮，显示编辑分类对话框
    showEditCateDialog (cate) {
      // 获取当前编辑的数据中的分类名称，并赋值给 editCateForm 中的commodityTypeName
      this.editCateForm.commodityTypeName = cate.commodityTypeName
      // 分类Id
      this.editCateForm.id = cate.id
      // 显示编辑分类的对话框
      this.editCateDialogVisibel = true
    },
    // 监听编辑分类对话框的关闭事件
    editCateDialogClosed () {
      this.$refs.editCateFormRef.resetFields()
    },
    // 点击按钮，确认编辑分类
    editCate () {
      // 对编辑分类表单进行预验证
      this.$refs.editCateFormRef.validate(async valid => {
        if (!valid) {
          // 预验证不通过
          this.$message.error('请按照要求填写数据！')
        } else {
          // 预验证通过
          const { data: res } = await this.$http.put('commodityTypes/' + this.editCateForm.id, {
            CommodityTypeName: this.editCateForm.commodityTypeName
          })
          if (res.meta.status !== 200) {
            // 更新分类失败
            this.$message.error('更新分类失败！')
          } else {
            // 更新分类成功
            this.$message.success('更新分类成功！')
            // 隐藏编辑分类的对话框
            this.editCateDialogVisibel = false
            // 刷新商品分类列表
            this.getCateList()
          }
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
/* 级联选择器的宽度 */
.el-cascader {
  width: 100%;
}
</style>>
